<template>
  <div class="lookProduct">
    <div class="lookBg" @click="lookBack"></div>
    <div class="lookProductWrapper">
      <div style="width: 100%">
        <div class="title">详情预览</div>
        <happy-scroll size="5" resize hide-horizontal>
          <div class="content">
            <div class="look-title">商品详情</div>
            <div v-if="productInfo.sliderImage" class="look-swiper">
              <el-carousel :autoplay="productInfo.sliderImage.split(',').length >= 1" loop arrow="never">
                <el-carousel-item v-for="(item, index) in productInfo.sliderImage.split(',')" :key="index">
                  <div class="look-carousel">
                    <img :src="$uploadURL(item)" :alt="$uploadURL(item)">
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="look-info">
              <div class="look-box">
                <div class="look-price">
                  <span>¥</span>{{ productInfo.price | NumFormat }}
                </div>
                <div v-if="productInfo.marketPrice" class="old-price">¥{{ productInfo.marketPrice | NumFormat }}</div>
              </div>
              <div class="look-tit">{{ productInfo.title }}</div>
              <div class="look-msg">
                <div class="item">原价:￥{{ productInfo.marketPrice | NumFormat }}</div>
                <div class="item">库存:{{ productInfo.stock }}{{ productInfo.unitName }}</div>
                <div class="item">销量:{{ productInfo.sales }}{{ productInfo.unitName }}</div>
              </div>
            </div>
            <div class="look-detail">
              <div class="look-detail-title">商品介绍</div>
              <div v-html="productInfo.content" class="look-detail-content"></div>
            </div>
          </div>
        </happy-scroll>
        <div class="look-key">
          <div class="look-key-main">
            <div @click="lookBack" class="look-key-main-box"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    productInfoApi as getTheProductInfoApi
  } from '@/api/product';
  import { HappyScroll } from 'vue-happy-scroll'
  import 'vue-happy-scroll/docs/happy-scroll.css'

  export default {
    name: "index",
    components: {
      HappyScroll
    },
    data() {
      return {
        productInfo: {}
      }
    },
    props: {
      /**
       * 产品ID
       */
      productId: {
        type: [String, Number],
        default: 0
      }
    },
    mounted() {
      this.getInfo();
    },
    methods: {
      /**
       * 商品详情
       */
      getInfo() {
        getTheProductInfoApi(this.productId).then(res => {
          this.productInfo = res;
        });
      },
      lookBack() {
        this.$emit("lookBack");
      }
    }
  }
</script>

<style lang="scss" scoped>
  .lookProduct {
    .lookProductWrapper {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      width: 100%;
      max-width: 375px;
      height: 700px;
      z-index: 1103;
      background-color: #fff;
      border-radius: 40px;
      overflow: hidden;
      .look-key {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 15px;
        .look-key-main {
          height: 50px;
          width: 50px;
          background-color: #e3e3e3;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          .look-key-main-box {
            width: 40px;
            height: 40px;
            background-color: #fff;
            border-radius: 50%;
            cursor: pointer;
          }
        }
      }
      .content {
        padding: 0 20px 50px 20px;
        .look-title {
          text-align: center;
          height: 46px;
          line-height: 46px;
          color: #000;
          font-size: 12px;
        }
        ::v-deep .look-swiper {
          height: 375px;
          .el-carousel__container,
          .el-carousel {
            height: 100%;
          }
          .look-carousel {
            width: 100%;
            height: 375px;
            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .el-carousel__indicators {
            width: 100%;
            text-align: center;
            .el-carousel__button {
              width: 25px;
            }
          }
        }
        .look-info {
          padding: 15px;
          .look-box {
            display: flex;
            align-items: center;
            height: 33px;
            .look-price {
              color: #ff3838;
              font-size: 25px;
              span {
                font-size: 15px;
              }
            }
            .old-price {
              font-size: 15px;
              margin-left: 10px;
              color: #333;
            }
          }
          .look-tit {
            font-size: 16px;
            color: #333;
            line-height: 24px;
          }
          .look-msg {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            .item {
              color: #999;
              font-size: 14px;
            }
          }
        }
        .look-detail {
          .look-detail-title {
            width: 100%;
            text-align: center;
            height: 46px;
            line-height: 46px;
            font-size: 14px;
          }
          .look-detail-content {

          }
        }
      }
      ::v-deep .happy-scroll {
        width: 100%;
        overflow: hidden;
        .happy-scroll-container {
          width: 100% !important;
          height: 574px !important;
          overflow: auto;
          .happy-scroll-content {
            width: 100%;
          }
        }
        .happy-scroll-strip--vertical {
          position: absolute;
          right: 0;
          top: 0;
          height: 100%;
        }
      }
      .title {
        text-align: center;
        height: 46px;
        line-height: 46px;
        color: #313131;
        font-size: 12px;
      }
    }
    .lookBg {
      position: fixed;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, .5);
      z-index: 1102;
      width: 100%;
      height: 100%;
    }
  }
</style>
